'use client'

import ProductSkeleton from './product-skeleton'

const ScrollContainerSkeleton: React.FC = () => {
  const skeletonList = Array<number>(4).fill(0, 3)
  return (
    <>
      <div className='flex items-center px-[0.9375rem] lg:px-homeScrollPaddingLg 2xl:px-homeScrollPadding2xl lg:mx-auto space-x-3 lg:space-x-4 overflow-scroll scroll-smooth'>
        {skeletonList.map((item) => {
          return <ProductSkeleton key={item} />
        })}
      </div>
      <div className='h-[1.40625rem] lg:h-[2.5rem] 2xl:h-[3.75rem]' />
      {/* 按钮 */}
      <div className='flex justify-between items-center px-[0.9375rem] lg:px-0 lg:max-w-[960px] lg:mx-auto 2xl:max-w-[1200px]'>
        {/* 发现更多按钮 */}
        <div className='flex justify-center items-center px-[0.9375rem] py-[0.8125rem] lg:px-[1.6875rem] lg:py-[1.0625rem] skeleton'>
          <div className='h-[0.875rem] lg:h-[1rem]' />
          <div className='w-[0.59375rem] lg:w-[1rem]' />
          <div className='relative w-[0.59375rem] h-[0.53125rem] lg:w-[0.8125rem] lg:h-[0.6875rem]' />
        </div>
        {/* 翻页按钮 */}
        <div className='flex items-center space-x-[0.5625rem] lg:space-x-[0.75rem]'>
          <div
            className={`relative w-[2.25rem] h-[2.25rem] lg:w-[3rem] lg:h-[3rem] skeleton`}
          />
          <div
            className={`relative w-[2.25rem] h-[2.25rem] lg:w-[3rem] lg:h-[3rem] skeleton`}
          />
        </div>
      </div>
    </>
  )
}

export default ScrollContainerSkeleton
